<script setup lang="ts">
import { useChartAutoResize } from '@/mixins/MixinChartAutoResize'
import type { VChartInstance } from '@/types'
import VueEcharts from 'vue-echarts'

const props = defineProps<{
  data: { x: string[], y: { name: string, value: number[] }[] }
}>()

const designStore = useDesignStore()
const option = computed(() => {
  // echarts 柱状图option
  return {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
      },
    },
    legend: {
      show: true,
      top: 30,
    },
    grid: {
      containLabel: true,
      left: 40,
      right: 40,
      top: 70,
      bottom: 30,
    },
    yAxis: {
      type: 'value',
    },
    xAxis: {
      type: 'category',
      data: props.data.x,
    },
    series: props.data.y.map((item) => {
      return {
        type: 'line',
        name: item.name,
        data: item.value,
      }
    }),
  }
})

const chartRef = ref<VChartInstance>()

useChartAutoResize(chartRef)
</script>

<template>
  <VueEcharts
    ref="chartRef"
    :option="option" :init-options="{
      locale: 'zh',
    }" :theme="designStore.theme"
  />
</template>
